<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<link rel="stylesheet" href="styles/options.css">
	<script type="text/javascript" src="jscolor/jscolor.js"></script> 
	<title id="widget-title">Opera Extensions | Imago</title>
	<script>
		var lastURL = '';
		var cutCount = 0;
		
		function endsWith(str, suffix) {
			return str.indexOf(suffix, str.length - suffix.length) !== -1;
		}

		function updateClickURL() {
			var urlImage = document.getElementById('imago.image.url').value;
			if( urlImage == lastURL ) {
				cutCount++;
			} else {
				lastURL = urlImage;
				cutCount = 0;
			}
			
			var urlArray = lastURL.split('/');
			var clickURL;
			if( urlArray.length > 0  && lastURL != '' ) {

					
					for( i = 0 ; i < urlArray.length - 1 ; i++ ) {
						urlArray[ i ] = urlArray[ i ] + '/';
					}
					if( endsWith( lastURL, '/' ) ) {
						urlArray[ urlArray.length - 1 ] = urlArray[ urlArray.length - 1] + '/';
					}
					//if( urlArray.length == 
					clickURL = '';
					//alert( urlArray.length);
					for ( i = 0; i < urlArray.length - cutCount; i++ ) {
						clickURL += urlArray[ i ];
					}
					if( clickURL == '' ) {
						clickURL = urlImage;
						cutCount = 0;
					}
				
				document.getElementById('imago.url').value = clickURL;
			}
			
		}
	</script>
</head>
<body>
	<header>
		<img src="images/icon_64.png">
		<h1>Imago</h1>
		<h2>Made by <span id="widget-author">zolv</h2>
	</header>
	
	<section style="margin-top:0px;">
		<h1>Image URL</h1>
	<p>
		<input type="text" id="imago.image.url" value="" style="width:100%;">
	</p>
		<p class="helpnote">Tip: You can put any URL on the web e.g.<br/><a href="http://www.opera.com/media/images/logo/Opera-logo-PNG.png">http://media.opera.com/media/images/logo/Opera-logo-PNG.png</a></p>
	</section>
	
	<section>
		<h1>Refresh</h1>
	<p>
	<input name="imago.image.refresh.interval" id="imago.image.refresh.interval" value="false" type="radio"></input>
	<label for="imago.image.refresh.interval">Every </label> 
		<input type="text" id="imago.image.refresh.hours" value="" style="width:5em;"> hours 
		<input type="text" id="imago.image.refresh.minutes" value="" style="width:5em;"> minutes 
		<input type="text" id="imago.image.refresh.seconds" value="" style="width:5em;"> seconds 
	</p>
	<p>
		<input name="imago.image.refresh.interval" id="imago.image.refresh.dont" value="true" type="radio"></input>
		<label for="imago.image.refresh.interval">Don't refresh, load once at startup</label> 
	</p>
	<p>	
		<button id="refreshButton" style="width:10em;">Refresh now</button>
	</p>
	</section>
	
	<section>
		<h1>Click URL</h1>
	<p>
		<input type="text" id="imago.url" value="" style="width:100%">
	</p>
	<p>	
		<button id="updateClickURLComponent" onClick="updateClickURL();" style="margin-bottom:10px;">Get shorter URL from image's URL</button>
	</p>
	<p class="helpnote">Tip: Click the button many times to get shorter and shorter URL</p>
	</section>
	
	<section>
		<h1>Title</h1> 
	</p>
	<p>
		<input type="text" id="imago.title" value="" style="width:100%">
	</p>
	<p class="helpnote">Tip: When title is empty, there is more space for image in Speed Dial tile.</p>
	</section>
	
	<section>
		<h1>Size</h1>
	<p><input name="imago.image.size" id="imago.image.size.no" value="no" type="radio" checked="true">Original size, don't resize</input></p>
	<p><input name="imago.image.size" id="imago.image.size.fitWidth" value="fitWidth" type="radio">Fit width</input></p>
	<p><input name="imago.image.size" id="imago.image.size.fitHeight" value="fitHeight" type="radio">Fit height</input></p>
	<p><input name="imago.image.size" id="imago.image.size.fitBoth" value="fitBoth" type="radio">Fit width and height</input></p>
	<p><input name="imago.image.size" id="imago.image.size.manual" value="manual" type="radio">Manual: </input>
		Width: <input type="text" id="imago.image.width" value="" style="width:5em;"> 
		Height: <input type="text" id="imago.image.height" value="" style="width:5em;">
	</p>
	<p class="helpnote">Note: Fit height (or setting height manually to 100%) does not work yet as expected for big images.</p>
	</section>

	<section>
		<h1>Position</h1>
	<table>
	<tr>
	<td><input name="imago.image.position" id="imago.image.position.topLeft" value="topLeft" type="radio" checked="true">Top-Left</input></td>
	<td><input name="imago.image.position" id="imago.image.position.topCenter" value="topCenter" type="radio">Top-Center</input></td>
	<td><input name="imago.image.position" id="imago.image.position.topRight" value="topRight" type="radio">Top-Right</input></td>
	</tr>
	<tr>
	<td><input name="imago.image.position" id="imago.image.position.middleLeft" value="middleLeft" type="radio" checked="true">Middle-Left</input></td>
	<td><input name="imago.image.position" id="imago.image.position.middleCenter" value="middleCenter" type="radio">Middle-Center</input></td>
	<td><input name="imago.image.position" id="imago.image.position.middleRight" value="middleRight" type="radio">Middle-Right</input></td>
	</tr>
	<tr>
	<td><input name="imago.image.position" id="imago.image.position.bottomLeft" value="bottomLeft" type="radio" checked="true">Bottom-Left</input></td>
	<td><input name="imago.image.position" id="imago.image.position.bottomCenter" value="bottomCenter" type="radio">Bottom-Center</input></td>
	<td><input name="imago.image.position" id="imago.image.position.bottomRight" value="bottomRight" type="radio">Bottom-Right</input></td>
	</tr>
	</table>
		<p><input name="imago.image.position" id="imago.image.position.manual" value="manual" type="radio">Manual: </input>
		<table class="position-manual">
		<tr>
		<td class="position-manual">Top: <input type="text" id="imago.image.position.manual.top" value="" style="width:5em;"></td>
		<td class="position-manual">Bottom: <input type="text" id="imago.image.position.manual.bottom" value="" style="width:5em;"></td>
		</tr>
		<tr>
		<td class="position-manual">Left: <input type="text" id="imago.image.position.manual.left" value="" style="width:5em;"></td>
		<td class="position-manual">Right: <input type="text" id="imago.image.position.manual.right" value="" style="width:5em;"></td>
		</tr>
		</table>
		<p class="helpnote position-manual">Tip: You can use negative values e.g. -50px, -20%</p>
	</p>
	</section>
	
	<section>
		<h1>Background</h1> 
	<p>
		<input name="background" id="imago.background.isTransparent" value="true" type="radio">Transparent</input>
	</p>
	<p>
		<input name="background" id="imago.background.colour" value="false" type="radio">Colour:</input>
		<input type="text" id="imago.background.colour.text" class="jscolor {hash:true, pickerBorderColor: '#808080', pickerInsetColor: '#808080', pickerFaceColor:'#EFEFEF', pickerClosable:true}" id="jscolor">
	</p>
	<p class="helpnote">Note: Transparent background in Speed Dial tile is not fully supported by Opera.</p>
	</section>
	<p>	
		<button id="saveButton" style="width:10em;">Save</button>
	</p>


	<footer style="text-align:center;">
		<p>Powered by the Opera Browser</p>
	</footer>

	<script>
		var imagoImageURL = document.getElementById('imago.image.url');
		var imagoImageRefreshInterval = document.getElementById('imago.image.refresh.interval');
		var imagoImageRefreshDont = document.getElementById('imago.image.refresh.dont');
		var imagoImageRefreshHours = document.getElementById('imago.image.refresh.hours');
		var imagoImageRefreshMinutes = document.getElementById('imago.image.refresh.minutes');
		var imagoImageRefreshSeconds = document.getElementById('imago.image.refresh.seconds');
		var imagoUrl = document.getElementById('imago.url');
		var imagoTitle = document.getElementById('imago.title');
		var imagoImageWidth = document.getElementById('imago.image.width');
		var imagoImageHeight = document.getElementById('imago.image.height');
		
		var imagoImagePositionManualTop = document.getElementById('imago.image.position.manual.top');
		var imagoImagePositionManualBottom = document.getElementById('imago.image.position.manual.bottom');
		var imagoImagePositionManualLeft = document.getElementById('imago.image.position.manual.left');
		var imagoImagePositionManualRight = document.getElementById('imago.image.position.manual.right');
		
		var imagoBackgroundIsTransparent = document.getElementById('imago.background.isTransparent');
		var imagoBackgroundColour = document.getElementById('imago.background.colour');
		var imagoBackgroundColourText = document.getElementById('imago.background.colour.text');
		
		var tcolor = new jscolor.color(imagoBackgroundColourText);
		tcolor.hash = "true";
		tcolor.pickerBorderColor = "#808080";
		tcolor.pickerFaceColor = "#EFEFEF";
		tcolor.pickerInsetColor = "#808080";
		tcolor.pickerClosable = "true";
		saveButton = document.getElementById('saveButton');
		refreshButton = document.getElementById('refreshButton');

		imagoImageURL.value = widget.preferences.imago_image_url;
		imagoImageRefreshInterval.checked = eval(widget.preferences.imago_image_refresh);
		imagoImageRefreshDont.checked = !imagoImageRefreshInterval.checked;
		imagoImageRefreshHours.value = Math.floor(widget.preferences.imago_image_refreshTime / 3600);
		imagoImageRefreshMinutes.value = Math.floor(widget.preferences.imago_image_refreshTime / 60) % 60;
		imagoImageRefreshSeconds.value = widget.preferences.imago_image_refreshTime % 60;
		imagoUrl.value=widget.preferences.imago_url;
		imagoTitle.value=widget.preferences.imago_title;
		
		var imagoImageSizeId;
		switch(widget.preferences.imago_image_size) {
			case 'no':
				imagoImageSizeId = 'imago.image.size.no';
				break;
			case 'fitWidth':
			default:
				imagoImageSizeId = 'imago.image.size.fitWidth';
				break;
			case 'fitHeight':
				imagoImageSizeId = 'imago.image.size.fitHeight';
				break;
			case 'fitBoth':
				imagoImageSizeId = 'imago.image.size.fitBoth';
				break;
			case 'manual':
				imagoImageSizeId = 'imago.image.size.manual';
				break;
		}
		var imagoImageSizeComponent = document.getElementById(imagoImageSizeId);
		imagoImageSizeComponent.checked = true;
	
		imagoImageWidth.value = widget.preferences.imago_image_size_manual_width;
		imagoImageHeight.value = widget.preferences.imago_image_size_manual_height;
		
	var imagoImagePositionId;
		switch(widget.preferences.imago_image_position) {
			case 'topLeft':
				imagoImagePositionId = 'imago.image.size.no';
				break;
			case 'topCenter':
				imagoImagePositionId = 'imago.image.position.topCenter';
				break;
			case 'topRight':
				imagoImagePositionId = 'imago.image.position.topRight';
				break;
			case 'middleLeft':
				imagoImagePositionId = 'imago.image.position.middleLeft';
				break;
			case 'middleCenter':
			default:
				imagoImagePositionId = 'imago.image.position.middleCenter';
				break;
			case 'middleRight':
				imagoImagePositionId = 'imago.image.position.middleRight';
				break;
			case 'bottomLeft':
				imagoImagePositionId = 'imago.image.position.bottomLeft';
				break;
			case 'bottomCenter':
				imagoImagePositionId = 'imago.image.position.bottomCenter';
				break;
			case 'bottomRight':
				imagoImagePositionId = 'imago.image.position.bottomRight';
				break;
			case 'manual':
				imagoImagePositionId = 'imago.image.position.manual';
				break;
		}
		var imagoImagePositionComponent = document.getElementById(imagoImagePositionId);
		imagoImagePositionComponent.checked = true;
		
		imagoImagePositionManualTop.value = widget.preferences.imago_image_position_manual_top;
		imagoImagePositionManualBottom.value = widget.preferences.imago_image_position_manual_bottom;
		imagoImagePositionManualLeft.value = widget.preferences.imago_image_position_manual_left;
		imagoImagePositionManualRight.value = widget.preferences.imago_image_position_manual_right;
		
		imagoBackgroundIsTransparent.checked = eval(widget.preferences.imago_background_isTransparent);		
		imagoBackgroundColour.checked = !imagoBackgroundIsTransparent.checked;
		tcolor.fromString(widget.preferences.imago_background_colour);

		saveButton.addEventListener('click', function(){
			// sanitize and save values
			widget.preferences.imago_image_url=imagoImageURL.value;
			widget.preferences.imago_image_refresh = eval(imagoImageRefreshInterval.checked) ? "true" : "false";
			widget.preferences.imago_image_refreshTime= parseInt(imagoImageRefreshHours.value) * 3600 +  parseInt(imagoImageRefreshMinutes.value) * 60 +  parseInt(imagoImageRefreshSeconds.value);
			widget.preferences.imago_url=imagoUrl.value;
			widget.preferences.imago_title=imagoTitle.value;
		
			var imagoImageSizeValue = 'fitWidth';
			imagoImageSizeValue = document.getElementById( 'imago.image.size.no' ).checked ? 'no': imagoImageSizeValue;
			imagoImageSizeValue = document.getElementById( 'imago.image.size.fitWidth' ).checked ? 'fitWidth': imagoImageSizeValue;
			imagoImageSizeValue = document.getElementById( 'imago.image.size.fitHeight' ).checked ? 'fitHeight': imagoImageSizeValue;
			imagoImageSizeValue = document.getElementById( 'imago.image.size.fitBoth' ).checked ? 'fitBoth': imagoImageSizeValue;
			imagoImageSizeValue = document.getElementById( 'imago.image.size.manual' ).checked ? 'manual': imagoImageSizeValue;
			widget.preferences.imago_image_size = imagoImageSizeValue;

			widget.preferences.imago_image_size_manual_width=imagoImageWidth.value;
			widget.preferences.imago_image_size_manual_height=imagoImageHeight.value;
			
			var imagoImagePositionValue = 'bottomCenter';
			imagoImagePositionValue = document.getElementById( 'imago.image.position.topLeft' ).checked ? 'topLeft': imagoImagePositionValue;
			imagoImagePositionValue = document.getElementById( 'imago.image.position.topCenter' ).checked ? 'topCenter': imagoImagePositionValue;
			imagoImagePositionValue = document.getElementById( 'imago.image.position.topRight' ).checked ? 'topRight': imagoImagePositionValue;
			imagoImagePositionValue = document.getElementById( 'imago.image.position.middleLeft' ).checked ? 'middleLeft': imagoImagePositionValue;
			imagoImagePositionValue = document.getElementById( 'imago.image.position.middleCenter' ).checked ? 'middleCenter': imagoImagePositionValue;
			imagoImagePositionValue = document.getElementById( 'imago.image.position.middleRight' ).checked ? 'middleRight': imagoImagePositionValue;
			imagoImagePositionValue = document.getElementById( 'imago.image.position.bottomLeft' ).checked ? 'bottomLeft': imagoImagePositionValue;
			imagoImagePositionValue = document.getElementById( 'imago.image.position.bottomCenter' ).checked ? 'bottomCenter': imagoImagePositionValue;
			imagoImagePositionValue = document.getElementById( 'imago.image.position.bottomRight' ).checked ? 'bottomRight': imagoImagePositionValue;
			imagoImagePositionValue = document.getElementById( 'imago.image.position.manual' ).checked ? 'manual': imagoImagePositionValue;
			widget.preferences.imago_image_position = imagoImagePositionValue;
		
			widget.preferences.imago_image_position_manual_top=imagoImagePositionManualTop.value;
			widget.preferences.imago_image_position_manual_bottom=imagoImagePositionManualBottom.value;
			widget.preferences.imago_image_position_manual_left=imagoImagePositionManualLeft.value;
			widget.preferences.imago_image_position_manual_right=imagoImagePositionManualRight.value;
		
			widget.preferences.imago_background_isTransparent = eval(imagoBackgroundIsTransparent.checked) ? "true" : "false";

			var reg=/#([a-z]|[0-9]){3,6}/i;
			if (reg.test(imagoBackgroundColourText.value)) {
				widget.preferences.imago_background_colour = imagoBackgroundColourText.value;
			}

			opera.extension.bgProcess.prefChange();
		}, false);
		
		refreshButton.addEventListener('click', function(){
			opera.extension.bgProcess.prefChange();
		}, false);
	</script>
</body>
</html>